<template>
	<view>
		<cu-custom bgColor="theme-bg-color" :isBack="true">
			<block slot="content">补卡申请</block>
		</cu-custom>
		<form>
			
			<view class="cu-form-group ">
				<view class="title">补卡日期</view>
				<view>{{CurrentDate}}</view>
			
			</view>
			<view class="cu-form-group " @click="SelectBeginTime()">
				<view class="title">开始时间</view>
				<view>{{formData.BeginTime==null?'选择开始时间':formData.BeginTime}}</view>

			</view>
			<view class="cu-form-group " @click="SelectEndTime()">
				<view class="title">结束时间</view>
				<view>{{formData.EndTime==null?'选择结束时间':formData.EndTime}}</view>

			</view>
			<view class="cu-form-group align-start">
				<view class="title">补卡原因</view>
				<textarea maxlength="-1" v-model="formData.Reason" placeholder="补卡原因"></textarea>
			</view>

			<view class="padding margin-top">
				<button class="cu-btn block theme-bg-color margin-tb-sm lg" @click="Save()">提交</button>
			</view>
		</form>
		<DateTimesPicker ref="BeginTimePicker" @submit="BeginTimeSubmit" :start-year="2024" :end-year="2030"
			:time-init="1688860800000" :time-hide="[true, true, true, true, true, true]"
			:time-label="['年', '月', '日', '时', '分', '秒']"></DateTimesPicker>
		<DateTimesPicker ref="EndTimePicker" @submit="EndTimeSubmit" :start-year="2024" :end-year="2030"
			:time-init="1688860800000" :time-hide="[true, true, true, true, true, true]"
			:time-label="['年', '月', '日', '时', '分', '秒']"></DateTimesPicker>
	</view>
</template>

<script>
	import DateTimesPicker from '@/components/buuug7-simple-datetime-picker/components/buuug7-simple-datetime-picker/buuug7-simple-datetime-picker.vue'
	import store from "@/store";
	import {
		mapGetters
	} from "vuex";
	export default {
		components: {
			DateTimesPicker
		},
		computed: {
			...mapGetters([
				'token', 'RoleTypeFormat', "userInfo", "userId"
			])
		},
		data() {
			return {
				formData: {},
				CurrentDate:null,
			}
		},
		onLoad(option) {
			this.CurrentDate=option.Date;
		},
		methods: {
			SelectBeginTime() {
				this.$refs.BeginTimePicker.show();
			},
			BeginTimeSubmit(e) {
				this.formData.BeginTime =`${e.year}-${e.month}-${e.day} ${e.hour}:${e.minute}:${e.second}`
				this.$refs.BeginTimePicker.hide();
				this.$forceUpdate();
			},
			SelectEndTime() {
				this.$refs.EndTimePicker.show();
			},
			EndTimeSubmit(e) {
				this.formData.EndTime =`${e.year}-${e.month}-${e.day} ${e.hour}:${e.minute}:${e.second}`
				console.log(this.formData)
				this.$refs.EndTimePicker.hide();
				this.$forceUpdate();
			},
			async Save() {
				let confirm = await this.$comm.ShowModal("你确定要提交请假吗?");

				if (confirm == false) {
					await this.$comm.ShowToast("用户放弃操作");
					return;
				}
				this.formData.UserId=this.userInfo.Id;
				this.formData.OrganizationId=this.userInfo.OrganizationId;
				this.formData.AuditStatus=0;
				this.formData.SelectDate=this.CurrentDate;
				if(!this.formData.BeginTime)
				{
					await this.$comm.ShowToast("请选择开始时间");
					return;
				}
				if(!this.formData.EndTime)
				{
					await this.$comm.ShowToast("请选择结束时间");
					return;
				}
				if(!this.formData.Reason)
				{
					await this.$comm.ShowToast("请输入补卡原因");
					return;
				}
				let {
					Data,
					Success,
				} = await this.$http.PostAsync("/ReCheck/Apply", this.formData);
				if (Success) {
					await this.$comm.ShowToast("提交成功");
					await this.$comm.ReturnPage();
				}
			}
		}
	}
</script>

<style>

</style>